<template>
  <!-- <el-image class="avator" :src="src" fit="cover"></el-image> -->
  <el-avatar  class="avator" fit="cover" :src="newSrc" v-bind="$attrs"></el-avatar>
</template>
<script setup>
import Avator from '@/assets/images/avator.jpg'
const props = defineProps({
  src: {
    type: String,
  },
  size: {
    type: [Number,String],
    default: '40px'
  },  
})
const newSrc = computed(() => {
  if (!props.src) return Avator
  if (props.src.startsWith('http')) return props.src
  return import.meta.env.VITE_API_URL + props.src
})
console.log(newSrc,)
</script>
<style lang="scss" scoped>
.avator {
  // border-radius: 50%;
  cursor: pointer;
  transition: all .3s;
  width: v-bind(size);
  height: v-bind(size);
  &:hover {
    transform: rotate(360deg);
  }
}
</style>